<!-- 页面容器 -->
<div class="algebra-container">
  <!-- 头部区域：背景+标题 -->
  <header class="algebra-header">
    <div class="header-bg"></div>
    <div class="header-content">
      <h1 class="main-title">线性代数基础</h1>
      <p class="sub-title">让线性代数不再晦涩 · 从基础到应用</p>
      <div class="math-decoration">
        <span>∣A∣</span>
        <span>Ax = b</span>
        <span>λ</span>
        <span>rank(A)</span>
      </div>
    </div>
  </header>

  <!-- 主体内容区域：左侧章节菜单 + 右侧章节详情 -->
  <main class="algebra-content" nz-row>
    <!-- 左侧章节菜单（占16列，响应式在小屏幕折叠） -->
    <div nz-col nzSpan="16" nzXs="24" class="chapter-menu">
      <div class="menu-header">
        <i class="anticon anticon-book"></i>
        <span>章节导航</span>
      </div>
      <!-- 章节列表 -->
      <div class="menu-list">
        <div
          *ngFor="let chapter of chapterList; let i = index"
          class="menu-item"
          [class.active]="activeChapterIndex === i"
          (click)="changeChapter(i); goToChapter(chapter)"
        >
          <!-- 章节序号 -->
          <div class="chapter-num" nz-col nzSpan="4">
            {{ chapter.title }}
          </div>
          <!-- 章节内容 -->
          <div class="chapter-info" nz-col nzSpan="20">
            <div class="chapter-name">{{ chapter.content }}</div>
            <div class="chapter-desc">{{ chapter.desc }}</div>
          </div>
          <!-- 激活状态指示器 -->
          <div class="active-indicator" [style.display]="activeChapterIndex === i ? 'block' : 'none'"></div>
        </div>
      </div>
    </div>

    <!-- 右侧章节详情/补充区域（占8列，小屏幕隐藏） -->
    <div nz-col nzSpan="8" nzXs="0" class="chapter-detail">
      <div class="detail-card">
        <div class="card-header">
          <i class="anticon anticon-info-circle"></i>
          <span>当前章节提示</span>
        </div>
        <div class="card-content">
          <h3>{{ chapterList[activeChapterIndex].content }}</h3>
          <p>{{ chapterList[activeChapterIndex].desc }}</p>
          <div class="study-tips">
            <h4>学习建议：</h4>
            <ul>
              <li>理解核心概念，避免死记硬背</li>
              <li>结合例题练习，掌握计算技巧</li>
              <li>尝试用几何意义辅助理解（如矩阵变换）</li>
            </ul>
          </div>
          <!-- 章节进度模拟 -->
          <div class="progress-bar">
            <span>章节进度</span>
          </div>
        </div>
      </div>
    </div>
  </main>

  <!-- 底部区域 -->
  <footer class="algebra-footer">
    <p>© 2025 线性代数学习平台 | 让数学变得简单</p>
  </footer>
</div>
